import { forwardRef, useImperativeHandle, useRef } from 'react'

import type { SwitchAndIntervalRef } from '../interface'
import CarDataModule from './CarDataModule'
import SafeStudyModule from './SafeStudyModule'

const LargeScreenRightContent = forwardRef<SwitchAndIntervalRef, any>(
  (props: any, ref) => {
    const CarDataModuleRef = useRef<SwitchAndIntervalRef>(null)
    const SafeStudyModuleRef = useRef<SwitchAndIntervalRef>(null)

    useImperativeHandle(ref, () => ({
      switchAssociation: (newAssociationId) => {
        CarDataModuleRef.current!.switchAssociation(newAssociationId)
        SafeStudyModuleRef.current!.switchAssociation(newAssociationId)
      },
      intervalRefresh: () => {
        CarDataModuleRef.current!.intervalRefresh()
        SafeStudyModuleRef.current!.intervalRefresh()
      },
      resize: () => {
        if (CarDataModuleRef.current) {
          CarDataModuleRef.current.resize?.()
        }
        if (SafeStudyModuleRef.current) {
          SafeStudyModuleRef.current.resize?.()
        }
      }
    }))

    return (
      <div
        style={{
          height: 960,
          display: 'flex',
          flexDirection: 'column',
          gap: 24
        }}
      >
        <CarDataModule ref={CarDataModuleRef}></CarDataModule>
        <SafeStudyModule ref={SafeStudyModuleRef}></SafeStudyModule>
      </div>
    )
  }
)

export default LargeScreenRightContent
